/* 會員中心 */

/* 會員資訊 */
.member-info.con { padding: .4rem 1.5rem; }
.member-info-sec { margin-top: .4rem; }
.member-info-sec:first-of-type { margin-top: 0; }
.member-info-sec:last-of-type > .member-info-sec-bd { border-bottom: none; }
.member-info-sec-hd { margin-bottom: .12rem; font-size: .26rem; line-height: 2; }
.member-info-sec-bd { border-top: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; }
.member-info-dl { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; min-height: .62rem; padding-top: .08rem; padding-bottom: .08rem; margin-top: -1px; border-top: inherit; border-bottom: inherit; }
.member-info-dl:first-of-type { border-top: none; }
.member-info-dl:last-of-type { border-bottom: none; }
.member-info-dl > dt { -webkit-box-sizing: border-box; box-sizing: border-box; width: 1.6rem; padding-left: .2rem; padding-right: .2rem; white-space: nowrap; line-height: .44rem; }
.member-info-dl > dd { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }
.member-info-button { width: .68rem; height: .32rem; padding-left: 0; padding-right: 0; margin-left: .2rem; }
.member-info-input.ui-form-input > input { height: .44rem; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset; }
/* 紅利點數 */
.member-point { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; padding-top: .1rem; }
.member-point-history { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.member-point-item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 2.4rem;
    height: 1.6rem;
    padding: .2rem;
    margin-left: .1rem;
    border: 1px solid #f4f4f4;
    -webkit-border-radius: .06rem;
            border-radius: .06rem;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    line-height: 1.4;
    -webkit-transition: border-color .2s, -webkit-box-shadow .2s, -webkit-transform .3s linear;
    transition: border-color .2s, -webkit-box-shadow .2s, -webkit-transform .3s linear;
    -o-transition: border-color .2s, box-shadow .2s, transform .3s linear;
    transition: border-color .2s, box-shadow .2s, transform .3s linear;
    transition: border-color .2s, box-shadow .2s, transform .3s linear, -webkit-box-shadow .2s, -webkit-transform .3s linear;
    }
.member-point-item:first-of-type { margin-left: 0; }
.member-point-item:hover,
.member-point-item:active { border-color: #aaa; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); }
.member-point-item > h4 { font-size: .18rem; }
.member-point-item > p { margin-top: .05rem; margin-bottom: .1rem; font-size: .14rem; }
.member-point-item > strong { color: #3c359f; font-size: .36rem; font-weight: 600; }
.member-point-button { width: .22rem; height: .22rem; margin-left: .15rem; border: 2px solid #333; -webkit-border-radius: 50%; border-radius: 50%; text-indent: -999em; overflow: hidden; background: url('') center no-repeat; -webkit-background-size: auto .12rem; background-size: auto .12rem; }
.member-point-button:hover,
.member-point-button:active { -webkit-transform: scale3d(.95,.95,.95); transform: scale3d(.95,.95,.95); }
.member-point-desc { -webkit-box-sizing: border-box; box-sizing: border-box; width: 6.8rem; padding: .4rem; }
.member-point-desc-table { width: 100%; font-size: .16rem; text-align: center; background-color: #fff; }
.member-point-desc-table > thead > tr { height: .6rem; background-color: #282460; }
.member-point-desc-table > thead > tr > th { font-size: inherit; color: #fff; font-weight: 600; }
.member-point-desc-table > tbody > tr { min-height: .5rem; }
.member-point-desc-table > tbody > tr > td { padding: .15rem .2rem; border: 1px solid #e2e2e2; }

/* 優惠券 */
.member-coupon { padding: .4rem 1.5rem .65rem; }
.member-coupon-hd { }
.member-coupon-bd { margin-top: .4rem; }
.member-coupon-ft { margin-top: .35rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.member-coupon-tab.con-tab { margin-top: .25rem; }
.member-coupon-list {}
.member-coupon-item { margin-top: .1rem; color: #fff; }
.member-coupon-item:first-of-type { margin-top: 0; }
.member-coupon-item > .item-bd { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 1.2rem; padding-left: 2rem; padding-right: .3rem; background: #e3184d url(../images/coupon-sprite.png) 0 0 no-repeat; background-image: -webkit-image-set(url('../images/coupon-sprite.png') 1x, url('../images/coupon-sprite@2x.png') 2x); background-image: image-set(url('../images/coupon-sprite.png') 1x, url('../images/coupon-sprite@2x.png') 2x); -webkit-background-size: 2rem auto; background-size: 2rem auto; overflow: hidden; }
.member-coupon-item > .item-bd::before {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: -0.05rem;
    border-left: .08rem dotted #fff;
    }
.member-coupon-item > .item-bd::after {
    content: '';
    position: absolute;
    top: 2px;
    bottom: 2px;
    right: -0.05rem;
    border-right: .08rem dotted #fff;
    }
.member-coupon-item > .item-ft { display: none; }
.member-coupon-item.active .member-coupon-button::before { -webkit-transform: translateY(.04rem) rotate(-45deg); -ms-transform: translateY(.04rem) rotate(-45deg); transform: translateY(.04rem) rotate(-45deg); }
.member-coupon-item.active > .item-ft { display: block; -webkit-animation: fadeIn .35s; animation: fadeIn .35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.member-coupon-item.unavailable > .item-bd { background-color: #bd929d; background-position: 0 -1.3rem; }
.member-coupon-item.expired > .item-bd { background-color: #c2c2c2; background-position: 0 -2.6rem; }

.member-coupon-meta { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-left: .35rem; padding-right: .35rem; line-height: 1.2; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.member-coupon-meta > h3 { margin-top: -.1rem; font-size: .2rem; }
.member-coupon-meta > h3 > b { font-weight: 600; font-size: .5rem; font-family: Arial, Helvetica; }
.member-coupon-meta > p { margin-top: .05rem; font-size: .14rem; }
.member-coupon-button { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background-color: inherit; font-size: .2rem; }
.member-coupon-button::before {
    content: '';
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: .12rem;
    height: .12rem;
    margin-right: .1rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: translateY(-1px) rotate(135deg);
        -ms-transform: translateY(-1px) rotate(135deg);
            transform: translateY(-1px) rotate(135deg);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    -o-transition: transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
    }
.member-coupon-info { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .15rem .3rem; color: #333; font-size: .14rem; line-height: 2; background-color: #f4f4f4; }
.member-coupon-info > dt { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: -0.05rem; color: #e3184d; }
.member-coupon-info > dt::before {
    content: '';
    display: block;
    width: 0;
    height: .12rem;
    border-left: .05rem solid currentColor;
    margin-right: .06rem;
    }

.member-coupon-tip.ui-form-tip { width: 5.4rem; margin: .2rem auto 0; }

/* 修改密碼 */
.member-password.con { padding-top: 1rem; padding-bottom: 1rem; }
form.member-password-update { width: 5.4rem; margin-left: auto; margin-right: auto; }
form.member-password-update .ui-form-item { position: relative; }
form.member-password-update .ui-form-icon { position: absolute; top: 0; right: 100%; height: .54rem; -webkit-transition: -webkit-transform .2s linear; transition: -webkit-transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; transition: transform .2s linear, -webkit-transform .2s linear; background-image:url(''); }
form.member-password-update .ui-form-input > input:focus + .ui-form-icon { -webkit-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); }

/* 我的帳號 */
.member-account.con { padding: .35rem 1.5rem 1.35rem; }
.member-account-ft { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: .5rem; }
.member-account-list {}
.member-account-item { margin-top: .1rem; font-size: .16rem; }
.member-account-item:first-of-type { margin-top: 0; }
.member-account-item.active .member-account-menu > .open::before { -webkit-transform: translateY(.04rem) rotate(-45deg); -ms-transform: translateY(.04rem) rotate(-45deg); transform: translateY(.04rem) rotate(-45deg); }
.member-account-item.active > .item-ft { display: block; -webkit-animation: fadeIn .35s; animation: fadeIn .35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
.member-account-item.disabled > .item-bd { background-color: #656477; background-position: 0 -1.2rem; }
.member-account-item.disabled .member-account-id > dd { color: inherit; }
.member-account-item.disabled .member-account-id::after { border-color: #828192; }
.member-account-item > .item-bd { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; color: #fff; height: 1.1rem; padding: .2rem .3rem; background: #282460 url(../images/member-account-bg.png) 0 0 no-repeat; -webkit-background-size: auto 2.34rem; background-size: auto 2.34rem; line-height: .34rem; }
.member-account-item > .item-ft { display: none; padding: .15rem .3rem .3rem; background-color: #f4f4f4; }
.member-account-item > .item-ft > p { color: #e91212; font-size: .14rem; line-height: 2.5; }
.member-account-id { position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; width: 2.3rem; padding-right: .4rem; margin-right: .4rem; }
.member-account-id::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: .52rem;
    margin-top: auto;
    margin-bottom: auto;
    border-right: 1px solid #312d74;
    }
.member-account-id > dd { color: #ffdd15; font-size: .26rem; font-weight: 600; white-space: nowrap; }
.member-account-meta { width: 1.5rem; }
.member-account-meta > p { white-space: nowrap; }
.member-account-meta > p > strong,
.member-account-meta > p > b { font-weight: 400; }
.member-account-menu { position: absolute; top: 0; bottom: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; padding: inherit; }
.member-account-menu > .unbind,
.member-account-menu > .bind {  color: #ffdd15; }
.member-account-menu > a:hover,
.member-account-menu > a:active { text-decoration: underline; }
.member-account-menu > .open { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; line-height: inherit; }
.member-account-menu > .open::before {
    content: '';
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: .10rem;
    height: .10rem;
    margin-right: .1rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: translateY(-2px) rotate(135deg);
        -ms-transform: translateY(-2px) rotate(135deg);
            transform: translateY(-2px) rotate(135deg);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    -o-transition: transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s;
    }
.member-account-msg { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 3.4rem; height: .8rem; -webkit-box-sizing: border-box; box-sizing: border-box; padding: .1rem .2rem; border: 1px solid #e91212; -webkit-border-radius: .06rem; border-radius: .06rem; background-color: #fff6f6; color: #e91212; font-size: .14rem; line-height: 1.5; }
.member-account-game.account-game { margin-top: .1rem; }
.member-account-game.account-game > .account-game-item { width: 1.2rem; height: 1.2rem; margin-left: .3rem; }
.member-account-game.account-game > .account-game-item:first-of-type { margin-left: 0; }

/* 會員帳號解除綁定驗證 */
form.member-account-unbind { width: 5.4rem; padding-top: 1.25rem; padding-bottom: 1.4rem; margin-left: auto; margin-right: auto; }
form.member-account-unbind .ui-form-item { position: relative; }
form.member-account-unbind .ui-form-button { margin-top: .35rem; }
form.member-account-unbind .ui-form-icon { position: absolute; top: 0; right: 100%; height: .54rem; background-image: url(''); -webkit-transition: -webkit-transform .2s linear; transition: -webkit-transform .2s linear; -o-transition: transform .2s linear; transition: transform .2s linear; transition: transform .2s linear, -webkit-transform .2s linear; }
form.member-account-unbind .ui-form-input > input:focus + .ui-form-icon { -webkit-transform: translateX(3px); -ms-transform: translateX(3px); transform: translateX(3px); }

/* 帳戶安全 */
.member-safe {}
.member-safe-hd { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-sizing: border-box; box-sizing: border-box; height: 3.8rem; padding: .2rem; background: #030426 url(../images/member-safe-banner.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; }
.member-safe-hd::before {
    content: '';
    display: block;
    width: 100%;
    height: 1.58rem;
    margin-bottom: .4rem;
    background: url(../images/google-logo.png) center no-repeat;
    background-image: -webkit-image-set(url('../images/google-logo.png') 1x, url('../images/google-logo@2x.png') 2x);
    background-image: image-set(url('../images/google-logo.png') 1x, url('../images/google-logo@2x.png') 2x);
    -webkit-background-size: auto 100%;
            background-size: auto 100%;
    -webkit-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
            transform-origin: center bottom;
    }
.member-safe-steps { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.member-safe-steps > li { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; height: 1.2rem; padding: .2rem; margin-right: .8rem; color: #fff; font-size: .14rem; line-height: 1.5; background-color: rgba(0, 0, 0, .8); }
.member-safe-steps > li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: .48rem;
    height: 100%;
    margin-left: 0.16rem;
    background: url('') center no-repeat;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    opacity: .6;
    }
.member-safe-steps > li > strong { margin-bottom: .1rem; font-size: .18rem; }
.member-safe-steps > li > h3 { font-size: inherit; }
.member-safe-steps > li:last-of-type { margin-right: 0; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.member-safe-steps > li:last-of-type::after { display: none; }
.member-safe-steps > li:last-of-type > strong { font-size: .26rem; }
.member-safe-bd.con { padding: .5rem 1.5rem; line-height: 2; }
.member-safe-step-hd > h3 { padding-left: .55rem; margin-bottom: .2rem; font-size: .3rem; line-height: .42rem; background: url(../images/google-logo.png) left center no-repeat; -webkit-background-size: auto 100%; background-size: auto 100%; }
.member-safe-step-bd { margin-top: .2rem; }
.member-safe-step-desc > dt { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: .05rem; font-size: .18rem; line-height: 2; }
.member-safe-step-desc > dt::before {
    content: '';
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: .1rem;
    height: .15rem;
    margin-right: .1rem;
    border-left: .06rem solid #282460;
    border-top: .09rem solid #282460;
    background-color: #ffde16;
    }
.member-safe-step-qrcode { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: .3rem; }
.member-safe-step-qrcode > li { margin-left: .4rem; margin-right: .8rem; }
.member-safe-step-qrcode > li > .platform { width: 1.4rem; height: .44rem; margin: 0 auto .2rem; -webkit-border-radius: .08rem; border-radius: .08rem; text-indent: -999em; background: #000 center no-repeat; -webkit-background-size: 100% auto; background-size: 100% auto; }
.member-safe-step-qrcode > li > .platform.google { background-image: url(../images/google-play@2x.png); }
.member-safe-step-qrcode > li > .platform.apple { background-image: url(../images/apple-appstore@2x.png); }
.member-safe-step-qrcode > li > .qrcode { display: block; width: 1.4rem; height: 1.4rem; margin-left: auto; margin-right: auto; border: .04rem solid #fff; background-color: #eee; }
.member-safe-step-ft { margin-top: .45rem; }
.member-safe-step-ft > .ui-button { width: 5.4rem; height: .7rem; margin-left: auto; margin-right: auto; line-height: .7rem; font-size: .22rem; font-weight: 600; }
.member-safe-step-2 { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: .3rem; padding-bottom: .6rem; }
.member-safe-step-2 > .qrcode { display: block; width: 1.4rem; height: 1.4rem; border: .04rem solid #fff; background-color: #eee; }
.member-safe-step-2 > div { width: 2.6rem; margin-left: .2rem; }
.member-safe-step-3 { width: 5.4rem; padding-top: .6rem; padding-bottom: .15rem; margin-left: auto; margin-right: auto; }
.member-safe-step-finish { padding-top: .25rem; padding-bottom: .2rem; }
.member-safe-step-finish > h4 { color: #e91212; font-size: .4rem; text-align: center; font-weight: 600; }

/* 會員任務 */
.member-mission { padding: .4rem 1.5rem .65rem; }
.member-mission-hd { }
.member-mission-bd { margin-top: .4rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.member-mission-ft { margin-top: .4rem; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }
.member-sign-progress { position: relative; z-index: 9; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: .6rem; margin-top: .94rem; }
.member-sign-progress > .count {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: .12rem;
    z-index: -1;
    margin-top: auto;
    margin-bottom: auto;
    -webkit-border-radius: .06rem;
            border-radius: .06rem;
    background-color: #ffdd15;
    background-image: -webkit-gradient(linear, left top, right top, from(#ff9f15), to(#ffdd15));
    background-image: -webkit-linear-gradient(left, #ff9f15, #ffdd15);
    background-image: -o-linear-gradient(left, #ff9f15, #ffdd15);
    background-image: linear-gradient(90deg, #ff9f15, #ffdd15);
    }
.member-sign-progress > .count-text {
    position: absolute;
    left: 0;
    bottom: -0.02rem;
    z-index: -1;
    font-size: .14rem;
    }
.member-sign-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: .12rem;
    z-index: -2;
    margin-top: auto;
    margin-bottom: auto;
    -webkit-border-radius: .06rem;
            border-radius: .06rem;
    background-color: #f7f7f7;
    }
.member-sign-progress-item { -webkit-box-sizing: border-box; box-sizing: border-box; width: 30%; height: 100%; padding-right: .5rem; }
.member-sign-progress-item:last-of-type { width: 40%; padding-right: 0; }
.member-sign-progress-item > .item-bd { position: relative; width: .6rem; height: 100%; margin-left: auto; -webkit-border-radius: 50%; border-radius: 50%; background-color: #f7f7f7; }
.member-sign-progress-item > .item-bd::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    -webkit-border-radius: inherit;
            border-radius: inherit;
    overflow: hidden;
    background: url(../images/coupon-icon.png) center no-repeat;
    -webkit-background-size: .35rem auto;
            background-size: .35rem auto;
    }
.member-sign-progress-item > .item-bd > strong {
    position: absolute;
    bottom: calc(100% + .1rem);
    left: 50%;
    height: .32rem;
    padding-left: .16rem;
    padding-right: .16rem;
    margin-left: auto;
    margin-right: auto;
    -webkit-border-radius: .16rem;
            border-radius: .16rem;
    color: #a0a0a0;
    line-height: .32rem;
    white-space: nowrap;
    background-color: #f7f7f7;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    }
.member-sign-progress-item > .item-bd > strong::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    width: 0;
    height: 0;
    margin-left: auto;
    margin-right: auto;
    border-left: .05rem solid transparent;
    border-right: .05rem solid transparent;
    border-top: .05rem solid #f7f7f7;
    }
.member-sign-progress-item > .item-bd > b {
    position: absolute;
    top: calc(100% + .05rem);
    left: 50%;
    margin-left: auto;
    margin-right: auto;
    font-size: .14rem;
    line-height: 2;
    white-space: nowrap;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    }
.member-sign-progress-item.completed > .item-bd { background-color: #ffdd15; background-image: -webkit-gradient(linear, left top, right top, from(#ff9f15), to(#ffdd15)); background-image: -webkit-linear-gradient(left, #ff9f15, #ffdd15); background-image: -o-linear-gradient(left, #ff9f15, #ffdd15); background-image: linear-gradient(90deg, #ff9f15, #ffdd15); }
.member-sign-progress-item.completed > .item-bd > strong { background-color: #e3184d; color: #fff; }
.member-sign-progress-item.completed > .item-bd > strong::after { border-top-color: #e3184d; }
.member-sign-days { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: .65rem; margin-left: -0.1rem; }
.member-sign-day { position: relative; z-index: 2; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 1.2rem; height: 1.2rem; -webkit-box-sizing: border-box; box-sizing: border-box; margin-left: .1rem; margin-top: .1rem; -webkit-border-radius: .12rem; border-radius: .12rem; overflow: hidden; background-color: #f7f7f7; }
.member-sign-day::before,
.member-sign-day::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    -webkit-border-radius: inherit;
            border-radius: inherit;
    border: 1px solid #f4f4f4;
    }
.member-sign-day::after { opacity: 0; border: 3px solid #ffdd1f; }
.member-sign-day > b { color: #6f3827; }
.member-sign-day > h4 { margin-top: .06rem; color: #999; }
.member-sign-day > h4::before {
    content: '';
    display: block;
    width: .4rem;
    height: .4rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin: 0 auto .06rem;
    border: .04rem solid #fde58e;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    background: #f2b13f url('') center no-repeat;
    -webkit-background-size: auto .18rem;
            background-size: auto .18rem;
    -webkit-box-shadow: 0 2px .06rem rgba(253, 215, 114, .5);
            box-shadow: 0 2px .06rem rgba(253, 215, 114, .5);
    }
.member-sign-day > strong { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-border-radius: inherit; border-radius: inherit; overflow: hidden; text-align: center; color: #fff; opacity: 1; }
.member-sign-day > strong::before {
    content: '';
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: .5rem;
    height: .5rem;
    border: .05rem solid #fff;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    margin-bottom: .05rem;
    background: center no-repeat;
    -webkit-background-size: auto .2rem;
            background-size: auto .2rem;
    }
.member-sign-day.active { background-color: #fff; }
.member-sign-day.active::after { opacity: 1; }
.member-sign-day.signed::before { border-color: #ffdd1f; }
.member-sign-day.signed > strong { background-color: rgba(255, 221, 21, .9); opacity: 1; }
.member-sign-day.signed > strong::before { background-image: url(''); }
.member-sign-day.disabled::before { border-color: #b8b8b8; }
.member-sign-day.disabled > strong { background-color: rgba(184, 184, 184, .9); opacity: 1; }
.member-sign-day.disabled > strong::before { background-image:url(''); }

/* 會員成就 */
.member-achievement {}
.member-achievement > .ui-form-tip { width: 5.4rem; margin-left: auto; margin-right: auto; }
.member-achievement-list { margin-top: .2rem; }
.member-achievement-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; height: 1.05rem; padding: .1rem .3rem; margin-top: .1rem; border: 1px solid #f2f2f2; -webkit-border-radius: .12rem; border-radius: .12rem; -webkit-box-shadow: 0 2px 3px rgba(237, 237, 237, .2); box-shadow: 0 2px 3px rgba(237, 237, 237, .2); -webkit-transition: border-color .2s, -webkit-transform .25s linear, -webkit-box-shadow .2s; transition: border-color .2s, -webkit-transform .25s linear, -webkit-box-shadow .2s; -o-transition: transform .25s linear, box-shadow .2s, border-color .2s; transition: transform .25s linear, box-shadow .2s, border-color .2s; transition: transform .25s linear, box-shadow .2s, border-color .2s, -webkit-transform .25s linear, -webkit-box-shadow .2s; }
.member-achievement-item:first-of-type { margin-top: 0; }
.member-achievement-item:hover,
.member-achievement-item:active { border-color: #ccc; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1); box-shadow: 0 2px 3px rgba(0, 0, 0, .1); }
.member-achievement-item::before {
    content: '';
    display: block;
    width: .66rem;
    height: .66rem;
    -webkit-border-radius: .5rem;
            border-radius: .5rem;
    margin-right: .18rem;
    background: #fffade url('') center no-repeat;
    -webkit-background-size: auto .42rem;
            background-size: auto .42rem;
    }
.member-achievement-item > .item-hd { width: 1.7rem; }
.member-achievement-item > .item-hd > .item-name { font-size: .22rem; font-weight: 600; white-space: nowrap; }
.member-achievement-item > .item-hd > .item-desc { font-size: .14rem; white-space: nowrap; }
.member-achievement-item > .item-bd { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; }
.member-achievement-item > .item-bd > .item-count { display: block; font-size: .14rem; text-align: center; }
.member-achievement-item > .item-bd > .item-progress { height: .12rem; margin-top: .06rem; -webkit-border-radius: .06rem; border-radius: .06rem; overflow: hidden; background-color: #ededed; }
.member-achievement-item > .item-bd > .item-progress > i { display: block; height: inherit; -webkit-border-radius: inherit; border-radius: inherit; background-color: #00c657; background-image: -webkit-gradient(linear, left top, right top, from(#00c657), to(#acf041)); background-image: -webkit-linear-gradient(left, #00c657, #acf041); background-image: -o-linear-gradient(left, #00c657, #acf041); background-image: linear-gradient(90deg, #00c657, #acf041); }
.member-achievement-item > .item-ft { min-width: .8rem; margin-left: .7rem; text-align: center; }
.member-achievement-item > .item-ft > .item-button {
    position: relative;
    z-index: 1;
    display: block;
    width: .8rem;
    height: .34rem;
    -webkit-border-radius: .17rem;
            border-radius: .17rem;
    background-color: #00c657;
    background-image: -webkit-gradient(linear, left top, right top, from(#00c657), to(#acf041));
    background-image: -webkit-linear-gradient(left, #00c657, #acf041);
    background-image: -o-linear-gradient(left, #00c657, #acf041);
    background-image: linear-gradient(90deg, #00c657, #acf041);
    color: #fff;
    overflow: hidden;
    }
.member-achievement-item > .item-ft > .item-button::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    -webkit-border-radius: inherit;
            border-radius: inherit;
    background-color: #00a046;
    background-image: -webkit-gradient(linear, left top, right top, from(#00a046), to(#82cb0e));
    background-image: -webkit-linear-gradient(left, #00a046, #82cb0e);
    background-image: -o-linear-gradient(left, #00a046, #82cb0e);
    background-image: linear-gradient(90deg, #00a046, #82cb0e);
    opacity: 0;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, -webkit-transform .2s;
    -o-transition: opacity .2s, transform .2s;
    transition: opacity .2s, transform .2s;
    transition: opacity .2s, transform .2s, -webkit-transform .2s;
    }
.member-achievement-item > .item-ft > .item-button:hover::after,
.member-achievement-item > .item-ft > .item-button:active::after,
.member-achievement-item > .item-ft > .item-button:focus::after { opacity: 1; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
.member-achievement-item > .item-ft > .item-get { margin-top: .05rem; font-size: .14rem; }
.member-achievement-item.received > .item-bd > .item-count { opacity: .3; }
.member-achievement-item.received > .item-ft > .item-button { background-color: #f4f4f4; background-image: none; color: #dbdbdb; cursor: unset; }
.member-achievement-item.received > .item-ft > .item-button::after { display: none; }
.member-achievement-item.disabled > .item-ft > .item-button { background-color: #b5b5b5; background-image: -webkit-gradient(linear, left top, right top, from(#b5b5b5), to(#f2f2f2)); background-image: -webkit-linear-gradient(left, #b5b5b5, #f2f2f2); background-image: -o-linear-gradient(left, #b5b5b5, #f2f2f2); background-image: linear-gradient(90deg, #b5b5b5, #f2f2f2); cursor: not-allowed; }
.member-achievement-item.disabled > .item-ft > .item-button::after { display: none; }

/* 會員投資 */
.member-investment.con { padding: .4rem 1.5rem .65rem; }
.member-investment-banner {
    position: relative;
    width: 6.4rem;
    height: 1.8rem;
    margin: .4rem auto 0;
    -webkit-border-radius: .2rem;
            border-radius: .2rem;
    background: #03c757 center no-repeat;
    -webkit-background-size: auto 100%;
            background-size: auto 100%;
    overflow: hidden;
    -webkit-box-shadow: 0 2px .18rem rgba(3, 189, 87, .3);
            box-shadow: 0 2px .18rem rgba(3, 189, 87, .3);
    }
.member-investment-banner.month { background-image: url(../images/member-investment-banner-month.jpg); }
.member-investment-banner.season { background-image: url(../images/member-investment-banner-season.jpg); background-color: #ff7200; -webkit-box-shadow: 0 2px .18rem rgba(255, 115, 0, .2); box-shadow: 0 2px .18rem rgba(255, 115, 0, .2);}
.member-investment-banner > p { position: absolute; opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); }
.member-investment-banner > a { display: block; width: 100%; height: 100%; text-indent: -999em; }
.member-investment-list { max-height: calc(5.1rem + .1rem); padding-left: .12rem; padding-right: .12rem; margin: .3rem -.12rem 0; overflow-y: auto; }
.member-investment-list::-webkit-scrollbar { background-color: #f4f4f4; width: .08rem; -webkit-border-radius: .04rem; border-radius: .04rem; }
.member-investment-list::-webkit-scrollbar-thumb { background-color: #03c757; width: .08rem; -webkit-border-radius: .04rem; border-radius: .04rem; -webkit-transition: backgroud-color .2s; -o-transition: backgroud-color .2s; transition: backgroud-color .2s; }
.member-investment-list::-webkit-scrollbar-thumb:hover,
.member-investment-list::-webkit-scrollbar-thumb:active { background-color: #00a046; }
.member-investment-list.season::-webkit-scrollbar-thumb { background-color: #ff7300; }
.member-investment-list.season::-webkit-scrollbar-thumb:hover,
.member-investment-list.season::-webkit-scrollbar-thumb:active { background-color: #dd6400; }
.member-investment-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; height: .85rem; padding: .1rem .3rem; margin-top: 2px; border: 1px solid #f2f2f2; -webkit-border-radius: .12rem; border-radius: .12rem; -webkit-box-shadow: 0 2px 3px rgba(237, 237, 237, .2); box-shadow: 0 2px 3px rgba(237, 237, 237, .2); -webkit-transition: border-color .2s, -webkit-transform .25s linear, -webkit-box-shadow .2s; transition: border-color .2s, -webkit-transform .25s linear, -webkit-box-shadow .2s; -o-transition: transform .25s linear, box-shadow .2s, border-color .2s; transition: transform .25s linear, box-shadow .2s, border-color .2s; transition: transform .25s linear, box-shadow .2s, border-color .2s, -webkit-transform .25s linear, -webkit-box-shadow .2s; }
.member-investment-item:first-of-type { margin-top: 0; }
.member-investment-item:hover,
.member-investment-item:active { border-color: #ccc; -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1); box-shadow: 0 2px 3px rgba(0, 0, 0, .1); }
.member-investment-item::before {
    content: '';
    display: block;
    width: .4rem;
    height: .4rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-right: .3rem;
    border: .04rem solid #fde58e;
    -webkit-border-radius: 50%;
            border-radius: 50%;
    background: #f2b13f url('') center no-repeat;
    -webkit-background-size: auto .18rem;
            background-size: auto .18rem;
    -webkit-box-shadow: 0 2px .06rem rgba(253, 215, 114, .5);
            box-shadow: 0 2px .06rem rgba(253, 215, 114, .5);
    }
.member-investment-item > .item-hd { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: .18rem; }
.member-investment-item > .item-hd > .item-desc { color: #e3184d; }
.member-investment-item > .item-bd { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; font-size: .18rem; color: #e3184d; text-align: right; }
.member-investment-item > .item-ft { margin-left: .4rem; text-align: center; }
.member-investment-item > .item-ft > .item-button {
    position: relative;
    z-index: 1;
    display: block;
    width: .8rem;
    height: .34rem;
    -webkit-border-radius: .17rem;
            border-radius: .17rem;
    background-color: #00c657;
    background-image: -webkit-gradient(linear, left top, right top, from(#00c657), to(#acf041));
    background-image: -webkit-linear-gradient(left, #00c657, #acf041);
    background-image: -o-linear-gradient(left, #00c657, #acf041);
    background-image: linear-gradient(90deg, #00c657, #acf041);
    color: #fff;
    overflow: hidden;
    }
.member-investment-item > .item-ft > .item-button::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: -1;
    -webkit-border-radius: inherit;
            border-radius: inherit;
    background-color: #00a046;
    background-image: -webkit-gradient(linear, left top, right top, from(#00a046), to(#82cb0e));
    background-image: -webkit-linear-gradient(left, #00a046, #82cb0e);
    background-image: -o-linear-gradient(left, #00a046, #82cb0e);
    background-image: linear-gradient(90deg, #00a046, #82cb0e);
    opacity: 0;
    -webkit-transform: scaleX(0);
        -ms-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transition: opacity .2s, -webkit-transform .2s;
    transition: opacity .2s, -webkit-transform .2s;
    -o-transition: opacity .2s, transform .2s;
    transition: opacity .2s, transform .2s;
    transition: opacity .2s, transform .2s, -webkit-transform .2s;
    }
.member-investment-item > .item-ft > .item-button:hover::after,
.member-investment-item > .item-ft > .item-button:active::after,
.member-investment-item > .item-ft > .item-button:focus::after { opacity: 1; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); }
.member-investment-item.received > .item-ft > .item-button { background-color: #f4f4f4; background-image: none; color: #dbdbdb; cursor: unset; }
.member-investment-item.received > .item-ft > .item-button::after { display: none; }
.member-investment-item.disabled > .item-ft > .item-button { background-color: #b5b5b5; background-image: -webkit-gradient(linear, left top, right top, from(#b5b5b5), to(#f2f2f2)); background-image: -webkit-linear-gradient(left, #b5b5b5, #f2f2f2); background-image: -o-linear-gradient(left, #b5b5b5, #f2f2f2); background-image: linear-gradient(90deg, #b5b5b5, #f2f2f2); cursor: not-allowed; }
.member-investment-item.disabled > .item-ft > .item-button::after { display: none; }
.member-investment-list.season .member-investment-item:not(.disabled):not(.received) > .item-ft > .item-button { background-color: #ff7200; background-image: -webkit-gradient(linear, left top, right top, from(#ff7200), to(#ffae00)); background-image: -webkit-linear-gradient(left, #ff7200, #ffae00); background-image: -o-linear-gradient(left, #ff7200, #ffae00); background-image: linear-gradient(90deg, #ff7200, #ffae00); }
.member-investment-list.season .member-investment-item:not(.disabled):not(.received) > .item-ft > .item-button::after { background-color: #dd6400; background-image: -webkit-gradient(linear, left top, right top, from(#dd6400), to(#ee7817)); background-image: -webkit-linear-gradient(left, #dd6400, #ee7817); background-image: -o-linear-gradient(left, #dd6400, #ee7817); background-image: linear-gradient(90deg, #dd6400, #ee7817); }

/* 會員月卡季卡購買 */
.member-card-buy { width: 5.4rem; padding-top: .3rem; padding-bottom: 2.9rem; margin-left: auto; margin-right: auto; }
.member-buy-res { width: 5.4rem; margin-left: auto; margin-right: auto; }
.member-buy-res.success { padding-bottom: 1.35rem; }
.member-buy-res.fail { padding-bottom: .4rem; }
.member-buy-res.fail > .res-hd > .res-title { color: #e91212; }
.member-buy-res > .res-hd { margin-bottom: .15rem; text-align: center; }
.member-buy-res > .res-hd > .res-title { color: #03c757; font-size: .4rem; }
.member-buy-res > .res-hd > .res-desc { font-size: .14rem; }
.member-buy-res > .res-bd {}
.member-buy-res > .res-ft { margin-top: .4rem; }
.member-buy-res > .res-ft > .ui-button { height: .68rem; font-size: .22rem; font-weight: 600; line-height: .68rem; }
.member-buy-res-sec { margin-top: .2rem; }
.member-buy-res-sec:first-of-type { margin-top: 0; }
.member-buy-res-sec > .sec-hd { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; margin-bottom: .12rem; line-height: 1.5; }
.member-buy-res-sec > .sec-hd > .sec-title { font-size: .28rem; font-weight: 400; }
.member-buy-res-sec > .sec-hd > .sec-desc { margin-left: .1rem; margin-bottom: .04rem; font-size: .14rem; font-weight: 400; }
.member-buy-res-sec > .sec-bd {}
.member-buy-res-sec > .sec-ft {}
.member-buy-res-table { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; border: 1px solid #dbdbdb; text-align: center; font-size: .14rem; }
.member-buy-res-table tr > th,
.member-buy-res-table tr > td { -webkit-box-sizing: border-box; box-sizing: border-box; height: .54rem; padding: .1rem .2rem; border: 1px solid #dbdbdb; }
.member-buy-res-table tr > th { background-color: #f4f4f4; }

/* 其他遊戲綁定 */
.member-game-bind {}
.member-game-bind-hd { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-sizing: border-box; box-sizing: border-box; height: 3.8rem; padding: .2rem; background: #450102 url(../images/member-game-bind-banner.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; }
.member-game-bind-hd::before {
    content: '';
    display: block;
    width: 100%;
    height: 1.58rem;
    margin-bottom: .4rem;
    background: url(../images/member-game-bind-logo.png) center no-repeat;
    background-image: -webkit-image-set(url('../images/member-game-bind-logo.png') 1x, url('../images/member-game-bind-logo@2x.png') 2x);
    background-image: image-set(url('../images/member-game-bind-logo.png') 1x, url('../images/member-game-bind-logo@2x.png') 2x);
    -webkit-background-size: auto 100%;
            background-size: auto 100%;
    }
.member-game-bind-bd.con { padding: .5rem 1.5rem 1.15rem; line-height: 2; }
.member-game-bind-steps { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; }
.member-game-bind-steps > li { position: relative; -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; height: 1.2rem; padding: .2rem; margin-right: .8rem; color: #fff; font-size: .14rem; line-height: 1.5; background-color: rgba(0, 0, 0, .8); }
.member-game-bind-steps > li::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: .48rem;
    height: 100%;
    margin-left: 0.16rem;
    background: url('') center no-repeat;
    -webkit-background-size: 100% auto;
            background-size: 100% auto;
    opacity: .6;
    }
.member-game-bind-steps > li > strong { margin-bottom: .1rem; font-size: .18rem; }
.member-game-bind-steps > li > h3 { font-size: inherit; }
.member-game-bind-steps > li:last-of-type { margin-right: 0; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
.member-game-bind-steps > li:last-of-type::after { display: none; }
.member-game-bind-steps > li:last-of-type > strong { font-size: .26rem; }
.member-game-bind-step-hd > h3 { margin-bottom: .2rem; font-size: .3rem; line-height: .42rem; -webkit-background-size: auto 100%; background-size: auto 100%; }
.member-game-bind-step-hd > p { color: #e3184d; }
.member-game-bind-step-bd { margin-top: .2rem; }
.member-game-bind-step-ft { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-top: .5rem; }
.member-game-bind-step-ft > .ui-button { width: 5.4rem; height: .7rem; margin-left: auto; margin-right: auto; line-height: .7rem; font-size: .22rem; font-weight: 600; }
.member-game-bind-step-ft > .bind-tip { margin-top: .1rem; }
.member-game-bind-step-ft > .bind-tip > a:hover,
.member-game-bind-step-ft > .bind-tip > a:active { text-decoration: underline; }
.member-game-bind-step-desc > dt { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-bottom: .05rem; font-size: .18rem; line-height: 2; }
.member-game-bind-step-desc > dt::before {
    content: '';
    display: block;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: .1rem;
    height: .15rem;
    margin-right: .1rem;
    border-left: .06rem solid #282460;
    border-top: .09rem solid #282460;
    background-color: #ffde16;
    }
.member-game-bind-step-2 { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-top: .3rem; padding-bottom: .6rem; }
.member-game-bind-step-2 > .qrcode { display: block; width: 1.4rem; height: 1.4rem; border: .04rem solid #fff; background-color: #eee; }
.member-game-bind-step-2 > div { width: 2.6rem; margin-left: .2rem; }
.member-game-bind-step-3 { width: 5.4rem; padding-top: .6rem; padding-bottom: .15rem; margin-left: auto; margin-right: auto; }
.member-game-bind-step-finish { padding-top: .25rem; padding-bottom: .2rem; }
.member-game-bind-step-finish > h4 { color: #e91212; font-size: .4rem; text-align: center; font-weight: 600; }
.member-game-bind-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.3rem; margin-top: -0.2rem; }
.member-game-bind-list > li { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; width: 2.8rem; height: 1.8rem; margin-left: .3rem; margin-top: .3rem; }
.member-game-bind-item { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 100%; height: 100%; -webkit-border-radius: .1rem; border-radius: .1rem; overflow: hidden; }
.member-game-bind-item > .game-pic { display: block; width: 100%; height: 100%; background: #dbd5f5 center no-repeat; -webkit-background-size: cover; background-size: cover; text-indent: -999em; }
.member-game-bind-item > .game-logo,
.member-game-bind-item > .game-name { position: absolute; opacity: 0; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); text-indent: -999em; }
.member-game-bind-server { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.2rem; margin-top: -0.1rem; }
.member-game-bind-server > li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 2.4rem;
    min-height: 1.02rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: .15rem .2rem;
    margin-left: .2rem;
    margin-top: .2rem;
    border: 1px solid #f4f4f4;
    -webkit-border-radius: .06rem;
            border-radius: .06rem;
    background-color: #fff;
    font-size: .14rem;
    line-height: 1.6;
    -webkit-box-shadow: 0 1px 2px rgba(29,26,89,.06);
            box-shadow: 0 1px 2px rgba(29,26,89,.06);
    -webkit-transition: border-color .2s, -webkit-transform .2s linear, -webkit-box-shadow .2s;
    transition: border-color .2s, -webkit-transform .2s linear, -webkit-box-shadow .2s;
    -o-transition: transform .2s linear, border-color .2s, box-shadow .2s;
    transition: transform .2s linear, border-color .2s, box-shadow .2s;
    transition: transform .2s linear, border-color .2s, box-shadow .2s, -webkit-transform .2s linear, -webkit-box-shadow .2s;
    }
.member-game-bind-server > li > h4,
.member-game-bind-server > li > h5 { font-size: inherit; font-weight: 400; }
.member-game-bind-server > li:hover,
.member-game-bind-server > li:active { border-color: #ccc; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); }
.member-game-bind-menu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-top: .1rem; padding-top: .1rem; border-top: 1px solid #f4f4f4; }
.member-game-bind-menu > a { color: #0b5ecf; font-size: .14rem; }
.member-game-bind-menu > a:hover,
.member-game-bind-menu > a:active { text-decoration: underline; }
.member-game-bind-res { padding-bottom: .35rem; text-align: center; line-height: 1.5; }
.member-game-bind-res > h4 { margin-bottom: .05rem; color: #03c757; font-size: .4rem; font-weight: 600; }

/* 綁定會員帳戶 */
.member-account-bind.con { padding-left: 1.5rem; padding-right: 1.5rem; }
.member-account-bind.con > .con-hd { padding-top: .15rem; }
.member-account-bind-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding-top: .15rem; padding-bottom: 4.5rem; }
.member-account-bind-list > li { margin-left: .6rem; }
.member-account-bind-list > li:first-of-type { margin-left: 0; }
.member-account-bind-list > li > a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 3rem;
    height: 1.5rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #f4f4f4;
    -webkit-border-radius: .06rem;
            border-radius: .06rem;
    -webkit-box-shadow: 0 1px 2px rgba(29, 26, 89, .06);
            box-shadow: 0 1px 2px rgba(29, 26, 89, .06);
    font-size: .22rem;
    font-weight: 600;
    -webkit-transition: border-color .2s, -webkit-transform .3s linear, -webkit-box-shadow .2s;
    transition: border-color .2s, -webkit-transform .3s linear, -webkit-box-shadow .2s;
    -o-transition: border-color .2s, transform .3s linear, box-shadow .2s;
    transition: border-color .2s, transform .3s linear, box-shadow .2s;
    transition: border-color .2s, transform .3s linear, box-shadow .2s, -webkit-transform .3s linear, -webkit-box-shadow .2s;
    }
.member-account-bind-list > li > a::before {
    content: '';
    display: block;
    width: 100%;
    height: .4rem;
    margin-bottom: .2rem;
    background: center no-repeat;
    -webkit-background-size: auto 100%;
            background-size: auto 100%;
    }
.member-account-bind-list > li > a:hover,
.member-account-bind-list > li > a:active { border-color: #dedede; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .1); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.member-account-bind-list > li:first-of-type > a::before { background-image: url(''); }
.member-account-bind-list > li:last-of-type > a::before { background-image:url(''); }

.member-account-bind-res.member-buy-res { padding-top: 1rem; padding-bottom: 3rem; }
